<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="缴款人">
              <a-select
                :default-active-first-option="false"
                :filter-option="false"
                :not-found-content="null"
                :show-arrow="false"
                placeholder="请输入并选择缴款人"
                show-search
                @change="handlerSearchChange"
                @search="handlerSearch"
              >
                <a-select-option v-for="d in searchResult" :key="d.payer" :disabled="isNotGetResult" :value="d.payer">
                  {{ d.payerName }}<span v-if="d.payerPhone">（{{ d.payerPhone }}）</span>
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!--          <template v-if="toggleSearchStatus">-->
          <a-col :md="6" :sm="8">
            <a-form-item label="识别代码">
              <j-input v-model="queryParam.vin" placeholder="请输入识别代码"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="订单编号">
              <j-input v-model="queryParam.ownerName" placeholder="请输入订单编号"></j-input>
            </a-form-item>
          </a-col>
          <!--          </template>-->
          <a-col :md="6" :sm="8">
            <span class="table-page-search-submitButtons" style="float: left; overflow: hidden">
              <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>
              <a-button
                icon="reload"
                style="margin-left: 8px"
                type="primary"
                @click="searchReset"
              >重置</a-button>
              <!--              <a style="margin-left: 8px" @click="handleToggleSearch">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button icon="plus" type="primary" @click="handleAdd">缴费</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-button :disabled="(record.amount)?false:true" type="primary" @click="getInfo(record)">查看缴费单</a-button>
        </span>
        <span
          slot="filterDepositAttribute"
          slot-scope="depositAttribute"
        >{{ depositAttribute | filterDepositAttribute(depositAttribute) }}</span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <!--<cxmOrderManager-modal ref="modalForm" @ok="modalFormOk"></cxmOrderManager-modal>-->
    <CarPurchasePrice ref="modalForm" @ok="modalFormOk"></CarPurchasePrice>
    <cxm-order-manager-info-modal ref="cxmOrderManagerInfoModal"></cxm-order-manager-info-modal>
  </a-card>
</template>

<script>
import CxmOrderManagerModal from '../../../cxm/modules/CxmOrderManagerModal.vue'
import CxmOrderManagerInfoModal from '../../../cxm/modules/CxmOrderManagerInfoModal.vue'
import CarPurchasePrice from './CarPurchasePrice.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import moment from 'moment'
import { getAction } from '@api/manage'

export default {
  name: 'CustomerPurchase',
  mixins: [JeecgListMixin],
  components: {
    CxmOrderManagerModal,
    CxmOrderManagerInfoModal,
    CarPurchasePrice,
    JInput,
    moment
  },
  data() {
    return {
      isNotGetResult: false,
      searchResult: '',
      description: 'cxm-订单管理页面',
      visible: false,
      // 表头
      dataSources: [],
      columns: [
        {
          title: '收据编号',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '费用名称',
          align: 'center',
          dataIndex: 'expenseName'
        },
        {
          title: '缴款人',
          align: 'center',
          dataIndex: 'payerName'
        },
        {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderId'
          // scopedSlots: {
          //   customRender: 'filterDepositAttribute',
          // },
        },
        {
          title: '识别代码(VIN)',
          align: 'center',
          dataIndex: 'vin'
        },
        {
          title: '缴款金额(元)',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '付款方式',
          align: 'center',
          dataIndex: 'payType'
        },
        // {
        //   title: '开票人',
        //   align: 'center',
        //   dataIndex: 'Drawer',
        // },
        {
          title: '退款(元)',
          align: 'center',
          dataIndex: 'refund'
        },
        {
          title: '收款日期',
          align: 'center',
          dataIndex: 'receiptTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],

      url: {
        list: '/sale/cxmSaleReceipt/list',
        detail: '/sale/cxmSaleReceipt/queryById',
        delete: '/cxm/cxmOrderManager/delete',
        deleteBatch: '/cxm/cxmOrderManager/deleteBatch',
        exportXlsUrl: 'cxm/cxmOrderManager/exportXls',
        importExcelUrl: '/cxm/cxmOrderManager/importExcel'
      }
    }
  },
  watch: {
    dataSource: {
      // 每个属性值发生变化就会调用这个函数
      handler(newVal, oldVal) {
        for (let i in newVal) {
          if (newVal[i].expenseName == 'deposit') {
            newVal[i].expenseName = '订金'
          } else if (newVal[i].expenseName == 'price') {
            newVal[i].expenseName = '车辆价格'
          } else if (newVal[i].expenseName == 'otherFees') {
            newVal[i].expenseName = '代办服务费'
          }
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true
    }
  },
  methods: {
    handlerSearchChange(value) {
      this.queryParam.payer = value
    },
    handlerSearch(value) {
      if (value) {
        getAction('/sale/cxmSaleReceipt/queryReceiptUsers?username=' + value).then((res) => {
          console.log(res)
          if (res.success) {
            if (res.result.length !== 0) {
              this.searchResult = res.result
            } else {
              this.searchResult = [
                {
                  payerName: '请输入完整名称进行检索！'
                }
              ]
            }

          }
        })
      } else if (!value) {
        this.searchResult = []
      }
    },
    getInfo(record) {
      this.$refs.cxmOrderManagerInfoModal.showModal(record)
      // getAction(this.url.detail+"?id="+record.id).then((res) => {
      //   console.log(res);
      //   if (res.success) {
      //     console.log(res.result)
      //     this.$refs.cxmOrderManagerInfoModal.showModal(res.result)
      //   }
      //
      // })

    }
  },
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    filterDepositAttribute(depositAttribute) {
      switch (depositAttribute) {
        case '1':
          return '可退'
          break
        case '2':
          return '不可退'
          break
        case '3':
          return '有条件可退'
          break
      }
    }
  }
}
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
